<template>
  <!-- 辖区管理 -- 新增/编辑 -->
  <div>
    <public-modal
      width="1200px"
      :footer="false"
      title="编辑企业信息"
      :publicVisible="publicVisible"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <a-form-model
          :model="form"
          :rules="rules"
          ref="form"
          class="formStyle addFectory"
          autocomplete="off"
          layout="vertical"
          :labelCol="{ style: 'width: 100%' }"
        >
          <!-- 企业基本信息 -->
          <div class="company-basic-info">
            <div class="title">
              <div class="icon"></div>
              企业基本信息
            </div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="企业名称:" prop="factoryName">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写企业名称"
                    v-model.trim="form.factoryName"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="统一社会信用代码:" prop="factoryCreditCode">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写统一社会信用代码"
                    v-model.trim="form.factoryCreditCode"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8"></a-col>
            </a-row>

            <a-row :gutter="24" style="margin-top: 60px">
              <a-col :span="8">
                <a-form-model-item label="备案联系人:" prop="factoryUserName">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写备案联系人"
                    v-model.trim="form.factoryUserName"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="联系电话:" prop="factoryMobile">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写联系电话"
                    v-model.trim="form.factoryMobile"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="联系邮箱:" prop="factoryMail">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写联系邮箱"
                    v-model.trim="form.factoryMail"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>

          <!-- 设备基本信息 -->
          <div class="device-basic-info" style="margin-top: 60px">
            <div class="title">
              <div class="icon"></div>
              设备基本信息
            </div>

            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="监测设备名称:" prop="factoryDeviceName">
                  <a-input
                    :maxLength="30"
                    autocomplete="off"
                    placeholder="请填写监测设备名称"
                    v-model.trim="form.factoryDeviceName"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8"></a-col>
              <a-col :span="8"></a-col>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </public-modal>
  </div>
</template>

<script>
import { factoryEdit } from '@/api/factory'
import publicModal from '@/components/publicModal'
export default {
  name: 'add',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      form: {},
      rules: {
        factoryName: [
          { required: true, message: '请填写企业名称', trigger: 'change' },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '企业名称只支持汉字输入',
          },
        ],
        factoryCreditCode: [
          { required: true, message: '请填写统一社会信用代码', trigger: 'change' },
          {
            pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            message: '请输入正确的统一社会信用代码号',
          },
        ],
        factoryUserName: [
          { required: true, message: '请填写备案联系人', trigger: 'change' },
          {
            pattern: /^[\u4e00-\u9fa5]+$/,
            message: '备案联系人只支持汉字输入',
          },
        ],
        factoryMobile: [
          { required: true, message: '请填写联系电话', trigger: 'change' },
          {
            pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
            message: '请输入正确手机号',
          },
        ],
        factoryMail: [
          { required: true, message: '请填写联系邮箱', trigger: 'change' },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: '请输入正确邮箱地址',
          },
        ],
        factoryDeviceName: [{ required: true, message: '请填写监测设备名称', trigger: 'change' }],
      },
    }
  },
  mounted() {},
  methods: {
    async show(records) {
      this.form = { ...records }
      this.publicVisible = true
    },

    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        let res = await factoryEdit(this.form)
        this.$message.success(res.message)
        this.$emit('refresh')
        this.cancel()
      })
    },

    cancel() {
      this.publicVisible = false
      this.form = {}
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item-children {
  display: flex;
  align-items: center;
}

/deep/ .ant-upload {
  padding: 0 !important;
}

/deep/ .ant-upload-drag {
  width: 360px;
  height: 100px;
  background: rgba(8, 85, 88, 0.7804);
  border: 1px solid #036265;
}

/deep/ .anticon-paper-clip {
  color: #00f8ff;
}
/deep/ .ant-upload-list {
  color: #00f8ff;
}

/deep/ .anticon-delete {
  color: #00f8ff;
}

/deep/ .ant-upload-list-item-info:hover {
  background: transparent;
}

.formStyle {
  padding: 0.2rem 0.5rem 1.2rem 0.5rem;

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .icon {
      width: 8px;
      height: 8px;
      margin-right: 6px;
      background: #00f8ff;
    }
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #00f8ff;
  }
}

// /deep/ .ant-upload.ant-upload-select-picture-card,
// .ant-upload {
//   background: #065054;
//   border-color: #036265;
// }
</style>
